<template>
  <div class="gray-page cockpit-detail-page">
    <nav-bar :title="title"></nav-bar>
    <div class="list-main page-main">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.baseType" line-height="0" swipe-threshold="3" @click="onClick">
          <van-tab v-for="(item, key) in tabOptions" :key="key" :name="item.code">
            <template #title>
              <van-tag
                v-if="searchForm.baseType === item.code"
                type="primary"
                round
                plain
                size="large"
                style="background-color: rgba(60, 189, 208, 0.1)"
              >
                {{ item.description }}
              </van-tag>
              <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
                {{ item.description }}
              </van-tag>
            </template>
          </van-tab>
        </van-tabs>
      </van-sticky>
      <div class="cockpit-detail-main page-main">
        <van-sticky class="page-scroll" :offset-top="88">
          <van-form v-if="detailShow" input-align="right" :label-width="120">
            <van-collapse v-model="activeNames" :border="false">
              <van-collapse-item size="large" title="事件详情" name="1">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.reportTime"
                  label="上报时间"
                />
                <van-cell
                  title="事件点位"
                  :value="formParams.communityRegionName"
                  title-class="van-cell__title_gray"
                  value-class="van-cell__value_black"
                />
                <van-cell
                  title="事件分类"
                  :value="formParams.eventTypeName"
                  title-class="van-cell__title_gray"
                  value-class="van-cell__value_black"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.eventScaleName"
                  class="unsupervise-eventscale"
                  label="事件规模"
                />
                <van-cell title="事件描述" title-class="van-cell__title_gray" :border="false" />
                <van-field
                  readonly
                  v-model="formParams.eventDescription"
                  rows="5"
                  autosize
                  type="textarea"
                  :border="false"
                  class="van-field__value--textarea-lightgray vant-left"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.overTime"
                  class="unsupervise-overTime"
                  label="要求时限"
                />
                <template v-if="fileList.length">
                  <van-cell title="添加图片/视频" title-class="van-cell__title_gray" :border="false" />
                  <van-field class="van-field__value--upload">
                    <template #input>
                      <van-uploader
                        name="fileList"
                        v-model="fileList"
                        :show-upload="false"
                        :deletable="false"
                        @click-preview="previewClick"
                      >
                        <template #preview-cover="file">
                          <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                            <div class="van-uploader__preview-masker"></div>
                            <video-player
                              class="video-player vjs-custom-skin"
                              :playsinline="true"
                              :options="{
                                aspectRatio: '16:16',
                                preload: 'auto',
                                sources: [
                                  {
                                    src: file.url
                                  }
                                ]
                              }"
                            ></video-player>
                          </template>
                        </template>
                      </van-uploader>
                    </template>
                  </van-field>
                </template>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  class="unsupervise-overTime"
                  v-model="formParams.eventStatusName"
                  label="处置状态"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.eventOriginName"
                  label="上报来源"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.reportPerson"
                  label="上报人"
                />
              </van-collapse-item>
              <van-collapse-item size="large" title="流转详情" name="2" v-if="hisList.length > 0">
                <div class="unsupervise-time">
                  <ul id="timeline">
                    <li class="work" v-for="(item, index) in hisList" :key="index">
                      <div class="relative">
                        <span class="date">
                          <span>{{ item.startTime.split(' ')[1] }}</span>
                          <p>{{ item.startTime.split(' ')[0] }}</p>
                        </span>
                        <span class="circle"></span>
                      </div>
                      <div class="content">
                        <div class="content-box">
                          <div class="content-box-left">
                            <p class="content-box-name">{{ item.activityName }}</p>
                            <div v-for="(info, index) in item.comment" :key="index">
                              <p v-if="info.commentLevel === '1'" style="color: #3cbdd0">{{ info.visitRecord }}</p>
                              <p v-if="info.commentLevel === '2'">{{ info.visitRecord }}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <!--                    <li class='work'>
                                          <div class='relative'>
                                            <span class='date'>12:36:17<p>2021-08-08</p></span>
                                            <span class='circle'></span>
                                          </div>
                                          <div class='content'>
                                            <div class='content-box'>
                                              <div class='content-box-left'>
                                                <p>事件获取</p>
                                                <p>XXX（13821112345）通过小程序上报民安民生 事件</p>
                                              </div>
                                            </div>
                                          </div>
                                        </li>-->
                  </ul>
                </div>
              </van-collapse-item>
            </van-collapse>
            <div style="padding: 16px"></div>
          </van-form>
          <personnel v-if="personnelShow"></personnel>
          <monitoring v-if="monitoringShow"></monitoring>
          <supervise v-if="superviseShow" :evevtCode="superCode" @dubanSucces="dubanClick"></supervise>
        </van-sticky>
      </div>
    </div>
  </div>
</template>

<script>
import personnel from '../../../../components/Widget/Cockpit/Supervise/Detail/personnel'
import monitoring from '../../../../components/Widget/Cockpit/Supervise/Detail/monitoring'
import supervise from '../../../../components/Widget/Cockpit/Supervise/Detail/supervise'
import Cockpit from '@/api/cockpit'
export default {
  name: 'unsupervise',
  components: {
    personnel,
    monitoring,
    supervise
  },
  data() {
    return {
      title: '详情',
      activeNames: ['1', '2'],
      formParams: {},
      tabOptions: [
        {
          code: '1',
          description: '事件详情'
        },
        {
          code: '2',
          description: '周围人员'
        },
        {
          code: '3',
          description: '周围监控'
        },
        {
          code: '4',
          description: '事件督办'
        }
      ],
      activeNameA: '1',
      searchForm: {
        recordType: '1',
        baseType: '1'
      },
      personnelShow: false, // 周围人员
      detailShow: true, // 事件详情
      monitoringShow: false, // 视频监控
      superviseShow: false, // 事件督办
      uploadKeys: [
        'firstImageUrl',
        'secondImageUrl',
        'thirdImageUrl',
        'fourthImageUrl',
        'fifthImageUrl',
        'sixthImageUrl',
        'seventhImageUrl',
        'eighthImageUrl',
        'ninthImageUrl'
      ],
      // 文件后缀
      accept: ['jpg', 'jpeg', 'png', 'mp4', 'avi', 'mov'],
      // 视频后缀
      format: ['mp4', 'avi', 'mov'],
      // 视频弹窗
      videoPopupShow: false,
      videoUrl: '',
      // 禁止多次点击
      buttonDisabled: false,
      // 处置/退回参数
      statusParams: {
        eventCode: '',
        eventOrigin: '',
        nextPerson: '',
        assignee: '',
        acceptance: '',
        comment: ''
      },
      fileList: [],
      superCode: '',
      hisList: []
    }
  },
  created() {
    this.superCode = this.$route.query.eventCode
    this.detail()
  },
  methods: {
    onClick(name, title) {
      if (name === '1') {
        this.detailShow = true
        this.personnelShow = false
        this.monitoringShow = false
        this.superviseShow = false
      } else if (name === '2') {
        this.personnelShow = true
        this.detailShow = false
        this.monitoringShow = false
        this.superviseShow = false
      } else if (name === '3') {
        this.personnelShow = false
        this.monitoringShow = true
        this.detailShow = false
        this.superviseShow = false
      } else if (name === '4') {
        this.personnelShow = false
        this.monitoringShow = false
        this.superviseShow = true
        this.detailShow = false
      }
    },
    detail() {
      Cockpit.Record.detail({ eventCode: this.$route.query.eventCode }).then(res => {
        this.formParams = res.data.data
        this.hisList = res.data.data.hisList
        const { data } = res.data
        this.eventData = { ...data }
        this.fileList = []
        for (let i = 0; i < this.uploadKeys.length; i++) {
          if (this.eventData[this.uploadKeys[i]]) {
            this.fileList.push({
              url: this.$config.ImageURl + this.eventData[this.uploadKeys[i]]
            })
          }
        }
      })
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.fileList[detail.index].url
      }
    },
    dubanClick() {
      this.searchForm.baseType = '1'
      this.superviseShow = false
      this.detailShow = true
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/cockpit/cockpit.less';
@import '~@/assets/style/cockpit/unsupervise.less';
</style>
